<!DOCTYPE html>
<html>
    <head>
        <title> </title>
        <script src="http://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
        <script type="text/javascript" src="./jtopo-0.4.8-min.js"></script>
        <script type="text/javascript" src="./toolbar.js"></script>
        <script type="text/javascript">
           $(document).ready(function() {
            //画布对象：canvas
            var canvas = document.getElementById('canvas');
            //抽象的舞台对象对应一个Canvas对象，所有图形展示的地方
            var stage = new JTopo.Stage(canvas);
            // 显示工具栏
            showJTopoToobar(stage);
            //场景对象
            var scene = new JTopo.Scene(stage);
            //背景颜色设置
            scene.background='./bg.jpg';
            //节点 一 添加
            var node = new JTopo.Node("HELLO");
            //设置节点位置
            node.setLocation(250, 250);
            //节点填充颜色
            node.fillColor = "255, 242, 0";
            //场景对象添加节点
            scene.add(node);
            // 节点 二 添加（设置图片节点）
            var appleNode = new JTopo.Node('Apple');
            // appleNode.alpha = 0.7; // 设置透明度
            appleNode.setImage('./imgs/node_icon.png', true);
            appleNode.setLocation(320, 80);
            scene.add(appleNode);
            // 添加连线
            var link = new JTopo.Link(node, appleNode, 'hahaha');
            link.lineWidth = 5; // 线宽
            link.dashedPattern = 5; // 虚线
            link.bundleOffset = 60; // 折线拐角处的长度
            link.bundleGap = 20; // 线条之间的间隔
            link.textOffsetY = 3; // 文本偏移量（向下3个像素）
            link.strokeColor = JTopo.util.randomColor(); // 线条颜色随机
            node.alarm = '';
            appleNode.alarm = '二级告警';
            setInterval(function() {
              if (appleNode.alarm == '二级告警') {
                appleNode.alarm = null;
              } else {
                appleNode.alarm = '二级告警'
              }
            }, 600);
            scene.add(link);
      });
        </script>
    </head>
    <body>
        <div id="content">
          <canvas id="canvas" width="910" height="400"></canvas>
        </div>
    </body>
</html>